{% extends "base.html" %}
{% block title %}Employees{% endblock %}
{% block content %}

{% block subnav %}
	{% include "subnav.html" %}
{% endblock %}

{% if session['role'] == 'user' %}
<h1>Employees</h1>
{% elif session['role'] == 'manager' or session['role'] == 'admin' %}
<div class="d-flex justify-content-between align-items-center mt-3 mb-3">
	<h1>Employees</h1>


	<div>
		<!-- Export CSV -->
		<a href="/employees/export" class="btn btn-sm btn-secondary">Export CSV</a>
		<!-- Add Employee Button -->
		<a href="#addEmployeeSection" id="toggleAddEmployeeBtn" class="btn btn-success"
		   data-bs-toggle="collapse" data-bs-target="#employeeTable,#addEmployeeSection"
		   aria-expanded="false">
			<i class="bi bi-plus-circle"></i> Add Employee
		</a>
	</div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
		{% for category, msg in messages %}
			<div class="alert alert-{{ category }} mt-2">{{ msg }}</div>
		{% endfor %}
	{% endif %}
{% endwith %}

<!-- Add Employee Section -->
<div class="collapse" id="addEmployeeSection">
	<h2>Add Employee</h2>

	<!-- CSV Upload -->
	<div class="card mb-4">
		<div class="card-body">
			<h5>Upload from CSV</h5>
			<form action="{{ url_for('employee.employees') }}" method="POST" enctype="multipart/form-data">
				<div class="mb-3">
					<input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
					<div class="form-text">Only .csv files are supported.</div>
				</div>
				<button type="submit" class="btn btn-primary">Upload CSV</button>
			</form>
		</div>
	</div>

	<div class="card mb-4">
		<div class="card-body">
			<form method="post">
				<div class="row g-3">
					<div class="col-md-6">
						<label for="first_name" class="form-label">First Name *</label>
						<input id="first_name" name="first_name" class="form-control" required>
					</div>

					<div class="col-md-6">
						<label for="last_name" class="form-label">Last Name *</label>
						<input id="last_name" name="last_name" class="form-control" required>
					</div>

					<div class="col-md-6">
						<label for="email" class="form-label">Email *</label>
						<input id="email" name="email" type="email" class="form-control" required>
					</div>

					<div class="col-md-6">
						<label for="phone" class="form-label">Phone</label>
						<input id="phone" name="phone" pattern="[0-9]{10}" placeholder="(999) 999-9999" class="form-control">
					</div>

					<div class="col-md-6">
						<label for="department_id" class="form-label">Department</label>
						<select id="department_id" name="department_id" class="form-select">
							<option value="">-- Select Department --</option>
							{% for d in departments %}
								<option value="{{ d.department_id }}">{{ d.name }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-md-6">
						<label for="role" class="form-label">Role</label>
						<input id="role" name="role" class="form-control">
					</div>

					<div class="col-md-6">
						<label for="status" class="form-label">Status</label>
						<select id="status" name="status" class="form-select">
							<option value="Active">Active</option>
							<option value="Inactive">Inactive</option>
						</select>
					</div>
				</div>

				<div class="mt-4">
					<button type="submit" class="btn btn-success">Add Employee</button>
				</div>
			</form>
		</div>
	</div>
</div>
{% endif %}

<!-- Employee Table -->
<div class="collapse show" id="employeeTable">

	<!-- Search Bar -->
	<form method="get" action="{{ url_for('employee.employees') }}" class="mb-3 d-flex">
	<input type="text" name="search" class="form-control me-2"
	       placeholder="Search employees..."
	       value="{{ request.args.get('search', '') }}">
	<button type="submit" class="btn btn-primary">Search</button>
	</form>

	<table class="table table-striped align-middle">
		<thead class="table-light">
			<tr>
				{% set columns = [
					('employee_id', 'ID'),
					('first_name', 'First Name'),
					('last_name', 'Last Name'),
					('email', 'Email'),
					('phone', 'Phone'),
					('department_id', 'Department'),
					('role', 'Role'),
					('status', 'Status')
				] %}
				{% for field, label in columns %}
					<th class="fw-bold text-nowrap">
						<a href="?sort={{ field }}&direction={{ 'desc' if sort == field and direction == 'asc' else 'asc' }}&search={{ request.args.get('search', '') }}"
   							class="text-dark text-decoration-none text-nowrap">
							{{ label }}
							{% if sort == field %}
								{{ '↑' if direction == 'asc' else '↓' }}
							{% endif %}
						</a>
					</th>
				{% endfor %}
				{% if session['role'] == 'manager' or session['role'] == 'admin' %}
				<th class="fw-bold text-nowrap">Actions</th>
				{% endif %}
			</tr>
		</thead>
		<tbody>
			{% for employee in employees %}
				<tr>
					<td>{{ employee.employee_id }}</td>
					<td>{{ employee.first_name }}</td>
					<td>{{ employee.last_name }}</td>
					<td>{{ employee.email }}</td>
					<td>{{ employee.phone or '' }}</td>
					<td>{{ employee.department.name if employee.department else '' }}</td>
					<td>{{ employee.role or '' }}</td>
					<td>{{ employee.status }}</td>
					{% if session['role'] == 'manager' or session['role'] == 'admin' %}
					<td>
						<!-- Collapsible Button -->
						<a class="btn btn-sm btn-secondary"
						   data-bs-toggle="collapse"
						   href="#editEmployee{{ employee.employee_id }}"
						   role="button"
						   aria-expanded="false"
						   aria-controls="editEmployee{{ employee.employee_id }}">
							Edit
						</a>
						<!-- Delete Button -->
						<a href="/employees/delete/{{ employee.employee_id }}" class="btn btn-sm btn-danger">Delete</a>
					</td>
					{% endif %}
				</tr>

				<!-- Collapsible edit form row -->
				<tr class="collapse" id="editEmployee{{ employee.employee_id }}">
					<td colspan="7">
						<div class="card card-body">
							<form method="post" action="/employees/edit/{{ employee.employee_id }}">
								<div class="row g-3">
									<div class="col-md-6">
										<label for="first_name_{{ employee.employee_id }}" class="form-label">First Name</label>
										<input type="text" id="first_name_{{ employee.employee_id }}" name="first_name"
											   class="form-control" value="{{ employee.first_name }}" required>
									</div>

									<div class="col-md-6">
										<label for="last_name_{{ employee.employee_id }}" class="form-label">Last Name</label>
										<input type="text" id="last_name_{{ employee.employee_id }}" name="last_name"
											   class="form-control" value="{{ employee.last_name }}" required>
									</div>

									<div class="col-md-6">
										<label for="email_{{ employee.employee_id }}" class="form-label">Email</label>
										<input type="email" id="email_{{ employee.employee_id }}" name="email"
											   class="form-control" value="{{ employee.email }}" required>
									</div>

									<div class="col-md-6">
										<label for="phone_{{ employee.employee_id }}" class="form-label">Phone</label>
										<input type="text" id="phone_{{ employee.employee_id }}" name="phone"
											   class="form-control" value="{{ employee.phone }}">
									</div>

									 <div class="col-md-6">
										<label for="department_id_{{ employee.employee_id }}" class="form-label">Department</label>
										<select id="department_id_{{ employee.employee_id }}" name="department_id" class="form-select" >
										<option value="">-- No Department --</option>
											{% for d in departments %}
												<option value="{{ d.department_id }}"
														{% if employee.department_id == d.department_id %}selected{% endif %}>
														{{ d.name }}
												</option>
											{% endfor %}
										</select>
									</div>

									<div class="col-md-6">
										<label for="role_{{ employee.employee_id }}" class="form-label">Role</label>
										<input type="text" id="role_{{ employee.employee_id }}" name="role"
											   class="form-control" value="{{ employee.role }}">
									</div>

									<div class="col-md-6">
										<label for="status_{{ employee.employee_id }}" class="form-label">Status</label>
										<select id="status_{{ employee.employee_id }}" name="status" class="form-select">
											<option value="Active" {% if employee.status == 'Active' %}selected{% endif %}>Active</option>
											<option value="Inactive" {% if employee.status == 'Inactive' %}selected{% endif %}>Inactive</option>
										</select>
									</div>
								</div>

								<div class="mt-3">
									<button type="submit" class="btn btn-sm btn-success">Save</button>
								</div>
							</form>
						</div>
					</td>
				</tr>


			{% endfor %}
		</tbody>
	</table>
</div>

{% endblock %}